<template>
  <h1>el_员工列表综合练习</h1>
  <el-form label-width="80px" label-position="top">
    <el-form-item label="姓名" >
      <el-input v-model="employee.name"></el-input>
    </el-form-item>
    <el-form-item label="薪资" >
      <el-input v-model="employee.salary"></el-input>
    </el-form-item>
    <el-form-item label="地址" >
      <el-input v-model="employee.position"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addEmployee">添加员工</el-button>
    </el-form-item>
  </el-form>

  <el-table
      :data="employeeArr"
      style="width: 70%">
    <el-table-column
        :prop="salary"
        label="薪资"
        width="180">
    </el-table-column>
    <el-table-column
        :prop="name"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        :prop="position"
        label="地址">
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
let employee=ref({
  name:"",
  salary:"",
  position:""
});

let employeeArr=ref(
    []
);
function addEmployee(){
  if(employee.value.name.trim()==''||employee.value.salary.trim()==''||employee.value.position.trim()=='')
  {
    ElMessage.error("请输入完整信息");
    return;
  }
  employeeArr.value.push(employee);
  employee={
    name:"",
    salary:"",
    position:""
  };
}

</script>

<style scoped>

</style>